import React from 'react';
import { Carousel, Card, Row, Col } from 'antd';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';

const StyledCarousel = styled(Carousel)`
  margin-bottom: 24px;
  
  .slick-slide {
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: #364d79;
    overflow: hidden;
  }
`;

const StyledCard = styled(Card)`
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
`;

const Home: React.FC = () => {
    const navigate = useNavigate();

    return (
        <div>
            <StyledCarousel autoplay>
                <div>
                    <h3 style={{ color: '#fff' }}>1</h3>
                </div>
                <div>
                    <h3 style={{ color: '#fff' }}>2</h3>
                </div>
                <div>
                    <h3 style={{ color: '#fff' }}>3</h3>
                </div>
                <div>
                    <h3 style={{ color: '#fff' }}>4</h3>
                </div>
            </StyledCarousel>

            <Row gutter={[16, 16]}>
                <Col span={12}>
                    <StyledCard title="兴趣圈子" hoverable onClick={() => navigate('/circles')}>
                        <p>发现志同道合的朋友</p>
                    </StyledCard>
                </Col>
                <Col span={12}>
                    <StyledCard title="高性价比" hoverable>
                        <p>精选好物推荐</p>
                    </StyledCard>
                </Col>
                <Col span={12}>
                    <StyledCard title="健康管理" hoverable>
                        <p>个性化养生计划</p>
                    </StyledCard>
                </Col>
                <Col span={12}>
                    <StyledCard title="宠物服务" hoverable>
                        <p>一站式宠物服务</p>
                    </StyledCard>
                </Col>
            </Row>
        </div>
    );
};

export default Home; 